<template>
  <div>
    <!-- 轮播部分 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item v-for="item in productList" :key="item.id">
        <img
          :style="{ width: '100%', height: '150px', backgroundColor: '#eee' }"
          :src="item.list_pic_url"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品展示区域 -->
    <div :style="{ textAlign: 'center', fontSize: '20px', margin: '10px 0' }">
      宝贝详情
    </div>
    <van-row type="flex" justify="space-between" :style="{marginTop:'10px'}">
      <van-col span="11" :style="{marginBottom:'5px'}" v-for="item in productList" :key="item.id"  @click="toDetail(item.id)">
        <img
          :style="{ borderRadius: '10px', width: '100%',backgroundColor:'rgb(192, 192, 192)' }"
          :src="item.list_pic_url"
          alt=""
        />
        <div
          :style="{
            width: '100%',
            backgroundColor: '#eee',
            borderRadius: '10px',
          }"
        >
          <div :style="{ textAlign: 'center',fontSize:'16px' }">{{ item.name }}</div>
          <div :style="{ color: 'crimson', textAlign: 'center',fontSize:'14px' }">
            ￥{{ item.retail_price }}.00元
          </div>
        </div>
      </van-col>
    </van-row>


  </div>
</template>

<script>
import request from "@/api/request";
export default {
  name: "Product",
  data() {
    return {
      categoryId: "",
      productList: [],
    };
  },
  mounted() {
    const { id } = this.$route.query;
    this.categoryId = id;
    this.getProductList();
    this.$bus.$emit('changeFlag',2)
  },
  methods: {
    async getProductList() {
      const result = await request.get(
        `/goods/list?categoryId=${this.categoryId.toString()}&page=${1}&limit=${9}`
      );
      this.productList = result.data.goodsList;
    },
    toDetail(id){
      const Id = id.toString()
        this.$router.push({name:'goods',params:{id:Id}})
    }
  },
};
</script>

<style scoped>
</style>